<template>
  <div class="Login">
    <nav-bar :title="'用户登陆'"></nav-bar>
    <div class="Login-content">
      <div class="title">登录</div>
      <div class="login-type-box">
        <div
          @click="handLoginType('0')"
          :class="active == 0 ? 'login-active' : ''"
        >
          账号登陆
        </div>
        <div
          @click="handLoginType('1')"
          :class="active == 1 ? 'login-active' : ''"
        >
          验证码登录
        </div>
      </div>
      <van-form v-if="active == 0" @submit="onSubmit" label-align="right">
        <van-field
          v-model="form.userPhone"
          name="form.userPhone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '手机号不能为空' }]"
        />
        <van-field
          v-model="form.password"
          name="form.password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '密码不能为空' }]"
        />
        <!-- <div class="loginBtn" @click="onSubmit">登录</div> -->
        <div style="margin: 40px">
          <van-button
            color="#0050A5"
            class="reg-box-btn"
            round
            block
            type="info"
            native-type="submit"
            >登 录</van-button
          >
        </div>
      </van-form>
      <van-form v-if="active == 1" @submit="onSubmit" label-align="right">
        <van-field
          v-model="form.userPhone"
          name="form.userPhone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '手机号不能为空' }]"
        />
        <van-field
          name="form.code"
          v-model="form.code"
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <span
              size="small"
              type="primary"
              v-show="showCodeButton"
              class="get-captcha"
              @click="getCode()"
              >发送验证码</span
            >
            <span v-show="!showCodeButton" class="get-captcha"
              >发送中{{ time }}</span
            >
          </template>
        </van-field>
        <!-- <div class="loginBtn" @click="onSubmit">登录</div> -->
        <div style="margin: 40px">
          <van-button
            color="#0050A5"
            class="reg-box-btn"
            round
            block
            type="info"
            native-type="submit"
            >登 录</van-button
          >
        </div>
      </van-form>
      <div class="reg-forget-box">
        <div class="reg-btn">
          <a href="javascript:;" @click="handZf('reg')">立即注册</a>
        </div>
        <div class="lin"></div>
        <div class="forget-btn">
          <a href="javascript:;" @click="handZf('getPassword')">忘记密码</a>
        </div>
      </div>
      <!-- <ValidationObserver ref="observer">
        <validation-provider rules="required|phone" name="phone" v-slot="{errors}">
          <div class="Login-cell">
            <input
              class="Login-input phone"
              v-model="form.userPhone"
              placeholder="请输入手机号码"
              type="text"
            />
            <span class="error">{{errors[0]}}</span>
          </div>
        </validation-provider>
        <validation-provider rules="required|min:6" name="password" v-slot="{errors}">
          <div class="Login-cell">
            <input
              class="Login-input password"
              v-model="form.password"
              placeholder="请输入密码"
              type="password"
            />
            <span class="error">{{errors[0]}}</span>
          </div>
        </validation-provider>
        <validation-provider rules="required|length:4" name="captcha" v-slot="{errors}">
          <div class="code Login-cell">
            <input type="text" v-model="form.code" placeholder="请输入验证码" />
            <img @click="findCode()" :src="codeImg" alt />
            <span class="error">{{errors[0]}}</span>
          </div>
        </validation-provider>
      </ValidationObserver>-->
      <!-- <div class="btns">
        <div class="loginBtn" @click="onSubmit">登录</div>
        <a href="/h5/#/reg" class="regBtn">立即注册</a>
      </div>-->
    </div>
    <div v-if="showWX">
      <div class="tree-login-top">
        <div class="lin"></div>
        <div class="title">第三方登录</div>
        <div class="lin"></div>
      </div>
      <div class="tree-login">
        <img @click="handWxLogin" src="@/assets/img/微信.png" alt />
        <img @click="handWbLogin" src="@/assets/img/微博.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
// import { ValidationProvider } from 'vee-validate'
// import { ValidationObserver } from 'vee-validate'
import { handleAuthorize, handleAuthorizeNo } from "@/utils/wxLogin.js";
import navBar from "@/components/NavBar";
export default {
  name: "Login",
  components: {
    // ValidationProvider,
    // ValidationObserver,
    navBar,
  },
  data() {
    return {
      form: {
        userPhone: "",
        password: "",
      },
      codeImg: "",
      active: "",
      time: 60,
      showCodeButton: true,
      showWX: false,
    };
  },
  created() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      this.showWX = true;
    } else {
      this.showWX = false;
    }
  },
  methods: {
    handZf(url) {
      this.$router.push({
        name: url,
      });
    },
    handWbLogin() {},
    handWxLogin() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        //在微信中打开
        handleAuthorize();
        console.log("是微信!!!");
      } else {
        handleAuthorizeNo();
        console.log("不是微信!!!");
      }
    },
    countdown() {
      if (!this.showCodeButton) {
        if (this.time > 0) {
          setTimeout(() => {
            this.time--;
            this.countdown();
          }, 1000);
        } else {
          this.showCodeButton = true;
          this.time = 60;
        }
      }
    },
    getCode() {
      if (!this.form.userPhone) {
        this.$toast.fail("请填写手机号!");
        return false;
      }
      this.form.timestamp = new Date().getTime();
      this.$request({
        url: "/code/shortMessage",
        data: {
          phoneNumber: this.form.userPhone,
          timestamp: this.form.timestamp,
        },
        method: "post",
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.showCodeButton = false;
          this.countdown();
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    },
    handLoginType(type) {
      this.active = type;
    },
    goBack() {
      this.$router.back();
    },
    onSubmit() {
      // this.$refs.observer.validate().then((valid) => {
      //   if (valid) {
      const openId = this.$sessionStorage.get("openId");
      if (openId) {
        this.form.openId = openId;
      }
      if (this.active == 0) {
        this.$request({
          url: "/oauth/login",
          data: this.form,
          method: "post",
        }).then((rsp) => {
          if (rsp.code === 200) {
            // this.$sessionStorage.set("userInfo", rsp.data);
            this.$store.dispatch("setUserInfo", rsp.data);
            //webUrl 说明是活动页面跳转过的
            if (this.$route.query.webUrl) {
              window.location.href = this.$route.query.webUrl;
            } else {
              this.$router.push({ path: "/" });
            }
          } else {
            this.$toast.fail(rsp.content);
          }
        });
      } else {
        this.$request({
          url: "/oauth/phoneLogin",
          data: this.form,
          method: "post",
        }).then((rsp) => {
          if (rsp.code === 200) {
            // this.$sessionStorage.set("userInfo", rsp.data);
            this.$store.dispatch("setUserInfo", rsp.data);
            this.$router.push({ path: "/" });
          } else {
            this.$toast.fail(rsp.content);
          }
        });
      }

      //   }
      // })
    },
    findCode() {
      this.form.timestamp = new Date().getTime();
      this.$request({
        url: "/admin/sysUser/getCaptcha",
        data: {
          timestamp: this.form.timestamp,
        },
        method: "post",
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.codeImg = "data:image/jpeg;base64," + rsp.data;
        } else {
          this.toast.fail(rsp.content);
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "../assets/css/base";

.Login {
  height: 100vh;
  background-color: #fff;
  .tree-login-top {
    padding: 0 px2rem(30);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: px2rem(180);
    .lin {
      width: px2rem(212);
      height: px2rem(2);
      background-color: #e9e9e9;
    }
    .title {
      font-size: px2rem(26);
      color: #121212;
    }
  }
  .tree-login {
    width: 100%;
    text-align: center;
    margin-top: px2rem(48);
    img {
      margin-right: px2rem(160);
      width: px2rem(80);
      height: px2rem(80);
      &:last-child {
        margin-right: px2rem(0);
      }
    }
  }
  .get-captcha {
    color: #0050a5;
  }
  .reg-forget-box {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    .lin {
      height: 12px;
      width: 1px;
      background-color: #666;
      margin: 0 16px;
    }

    .reg-btn {
      font-size: px2rem(28);
    }
    .forget-btn {
      font-size: px2rem(28);
    }
    a {
      color: #666666;
    }
  }
  .login-type-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: px2rem(74);
    div {
      color: #333;
      font-size: px2rem(32);
      margin-right: 32px;
      position: relative;
      &:last-child {
        margin-right: 0;
      }
    }
    .login-active {
      &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        height: 3px;
        background-color: #0050a5;
        width: px2rem(40);
        left: 50%;
        margin-left: px2rem(-20);
      }
    }
    .user-login {
    }
    .code-login {
    }
  }
  &-banner {
    box-sizing: border-box;
    font-size: px2rem(48);
    color: #ffffff;
    text-align: center;
    background-size: cover;
    background-position: bottom;
  }
  &-cell {
    display: flex;
    flex-wrap: wrap;
    // margin-bottom: px2rem(30);
    justify-content: center;
    height: px2rem(110);
    & > .error {
      padding-left: px2rem(100);
      text-align: left;
      width: 100%;
      // padding-top: px2rem(10);
    }
  }
  &-content {
    // position: absolute;
    // top: px2rem(339);
    // left: 50%;
    // z-index: 10;
    // transform: translateX(-50%);
    // width: px2rem(571);
    // height: px2rem(579);
    // background: rgba(255, 255, 255, 1);
    text-align: center;
    // overflow: hidden;
    // display: flex;
    // flex-direction: column;
    // align-items: center;

    & > .title {
      font-size: px2rem(36);
      font-weight: bold;
      margin-top: px2rem(40);
      margin-bottom: px2rem(80);
      color: rgba(13, 12, 12, 1);
    }
    .phone {
      background-image: url(../assets/img/user/phone.png);
    }
    .password {
      background-image: url(../assets/img/user/password.png);
    }
    .code {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      & > img {
        width: px2rem(140);
        height: px2rem(60);
      }
    }
    & > .btns {
      display: flex;

      & > div {
        width: px2rem(212);
        height: px2rem(60);
        background: rgba(0, 80, 165, 1);
        border-radius: px2rem(5);
        color: #ffffff;
        line-height: px2rem(60);
        font-size: px2rem(24);
      }
      & > a {
        display: block;
        width: px2rem(212);
        height: px2rem(60);
        background: #ffffff;
        border-radius: px2rem(5);
        color: $mainColor;
        line-height: px2rem(60);
        font-size: px2rem(24);
        border: 0.5px solid $mainColor;
        margin-left: px2rem(40);
      }
    }
  }
  &-link {
    width: 100%;
    position: absolute;
    bottom: px2rem(120);
    text-align: center;
    & > span {
      color: #959595;
      font-size: px2rem(24);
      padding-right: px2rem(20);
    }
    & > a {
      font-size: px2rem(24);
      color: $mainColor;
    }
  }
}
</style>
